<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        v-waves
        class="filter-item"
        type="primary"
        icon="el-icon-plus"
        @click="handleAdd"
      >{{ $t('common.action.add') }}</el-button>
    </div>

    <el-table
      :key="tableKey"
      row-key="id"
      :data="tableData"
      border
      stripe
      fit
      default-expand-all
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column prop="name" :label="$t('routeView.column.name.label')" />
      <el-table-column prop="code" :label="$t('routeView.column.code.label')" />
      <el-table-column prop="route" :label="$t('routeView.column.route.label')" />
      <el-table-column prop="languateKey" :label="$t('routeView.column.languateKey.label')" />
      <el-table-column prop="icon" :label="$t('routeView.column.icon.label')" />
      <el-table-column :label="$t('common.options')" width="480">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)"
          >{{ $t('common.action.delete') }}</el-button>

          <el-button size="mini" @click="handleEdit(scope.row)">{{ $t('common.action.edit') }}</el-button>

          <el-button
            size="mini"
            icon="el-icon-plus"
            type="primary"
            @click="handleAddNewNode(scope.row)"
          >{{ $t('routeView.action.addNode') }}</el-button>

          <el-button
            size="mini"
            type="primary"
            @click="handleOpenApi(scope.row)"
          >{{ $t('routeView.action.openApi') }}</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="handleOpenButton(scope.row)"
          >{{ $t('routeView.action.openButton') }}</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="dialogRouteTitleMap[dialogRouteStatus]" :visible.sync="dialogRouteVisible">
      <el-form
        ref="editRouteForm"
        :rules="editRules"
        :model="editRouteData"
        label-position="left"
        label-width="100px"
      >
        <el-form-item :label="$t('routeView.column.name.label')" prop="name">
          <el-input
            v-model="editRouteData.name"
            :placeholder="$t('routeView.column.name.placeholder')"
          />
        </el-form-item>

        <el-form-item :label="$t('routeView.column.sort.label')" prop="sort">
          <el-input-number
            v-model="editRouteData.sort"
            :placeholder="$t('routeView.column.sort.placeholder')"
          />
        </el-form-item>

        <el-form-item :label="$t('routeView.column.parentId.label')" prop="parentId">
          <select-tree
            v-model="editRouteData.parentId"
            :options="routeTreeData"
            :props="routeDefaultProps"
          />
        </el-form-item>

        <el-form-item :label="$t('routeView.column.code.label')" prop="code">
          <el-input
            v-model="editRouteData.code"
            :placeholder="$t('routeView.column.code.placeholder')"
          />
        </el-form-item>
        <el-form-item :label="$t('routeView.column.route.label')" prop="route">
          <el-input
            v-model="editRouteData.route"
            :placeholder="$t('routeView.column.route.placeholder')"
          />
        </el-form-item>
        <el-form-item :label="$t('routeView.column.languateKey.label')" prop="languateKey">
          <el-input
            v-model="editRouteData.languateKey"
            :placeholder="$t('routeView.column.languateKey.placeholder')"
          />
        </el-form-item>
        <el-form-item :label="$t('routeView.column.icon.label')" prop="icon">
          <el-input
            v-model="editRouteData.icon"
            :placeholder="$t('routeView.column.icon.placeholder')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRouteVisible = false">{{ $t('common.action.close') }}</el-button>
        <el-button
          type="primary"
          @click="dialogRouteStatus==='add'?apiAddRoute():apiModifyRoute()"
        >{{ $t('common.action.confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-drawer :visible.sync="drawerApiVisibleSync" size="50%">
      <div slot="title">{{ $t('routeView.title.openApi') }}</div>
      <div slot>
        <div class="app-container">
          <div class="filter-container">
            <el-button
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-plus"
              @click="handleAddApi"
            >{{ $t('common.action.add') }}</el-button>
          </div>
          <el-table
            :key="drawerApiTableKey"
            row-key="id"
            :data="apiList"
            border
            stripe
            fit
            default-expand-all
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column prop="name" :label="$t('routeApi.column.name.label')" />
            <el-table-column prop="code" :label="$t('routeApi.column.code.label')" />
            <el-table-column prop="apiPath" :label="$t('routeApi.column.apiPath.label')" />
            <el-table-column prop="apiMethod" :label="$t('routeApi.column.apiMethod.label')" />
            <el-table-column prop="sort" :label="$t('routeApi.column.sort.label')" />
            <el-table-column :label="$t('common.options')">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDeleteApi(scope.row)"
                >{{ $t('common.action.delete') }}</el-button>

                <el-button
                  size="mini"
                  @click="handleEditApi(scope.row)"
                >{{ $t('common.action.edit') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>

    <el-drawer :visible.sync="drawerButtonVisibleSync" size="50%">
      <div slot="title">{{ $t('routeView.title.openButton') }}</div>
      <div slot>
        <div class="app-container">
          <div class="filter-container">
            <el-button
              v-waves
              class="filter-item"
              type="primary"
              icon="el-icon-plus"
              @click="handleAddButton"
            >{{ $t('common.action.add') }}</el-button>
          </div>
          <el-table
            :key="drawerButtonTableKey"
            row-key="id"
            :data="buttonList"
            border
            stripe
            fit
            default-expand-all
            highlight-current-row
            style="width: 100%;"
          >
            <el-table-column prop="name" :label="$t('routeButton.column.name.label')" />
            <el-table-column prop="code" :label="$t('routeButton.column.code.label')" />
            <el-table-column prop="sort" :label="$t('routeButton.column.sort.label')" />
            <el-table-column :label="$t('common.options')">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="danger"
                  @click="handleDeleteButton(scope.row)"
                >{{ $t('common.action.delete') }}</el-button>

                <el-button
                  size="mini"
                  @click="handleEditButton(scope.row)"
                >{{ $t('common.action.edit') }}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </el-drawer>

    <el-dialog
      :title="dialogRouteApiTitleMap[dialogRouteApiStatus]"
      :visible.sync="dialogRouteApiVisible"
    >
      <el-form
        ref="editRouteApiForm"
        :rules="editApiRules"
        :model="editRouteApiData"
        label-position="left"
        label-width="100px"
      >
        <el-form-item :label="$t('routeApi.column.name.label')" prop="name">
          <el-input
            v-model="editRouteApiData.name"
            :placeholder="$t('routeApi.column.name.placeholder')"
          />
        </el-form-item>

        <el-form-item :label="$t('routeApi.column.sort.label')" prop="sort">
          <el-input-number
            v-model="editRouteApiData.sort"
            :placeholder="$t('routeApi.column.sort.placeholder')"
          />
        </el-form-item>

        <el-form-item :label="$t('routeApi.column.code.label')" prop="code">
          <el-input
            v-model="editRouteApiData.code"
            :placeholder="$t('routeApi.column.code.placeholder')"
          />
        </el-form-item>
        <el-form-item :label="$t('routeApi.column.apiPath.label')" prop="apiPath">
          <el-input
            v-model="editRouteApiData.apiPath"
            :placeholder="$t('routeApi.column.apiPath.placeholder')"
          />
        </el-form-item>
        <el-form-item :label="$t('routeApi.column.apiMethod.label')" prop="apiMethod">
          <el-input
            v-model="editRouteApiData.apiMethod"
            :placeholder="$t('routeApi.column.apiMethod.placeholder')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRouteApiVisible = false">{{ $t('common.action.close') }}</el-button>
        <el-button
          type="primary"
          @click="dialogRouteApiStatus==='add'?apiAddRouteApi():apiModifyRouteApi()"
        >{{ $t('common.action.confirm') }}</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="dialogRouteButtonTitleMap[dialogRouteButtonStatus]"
      :visible.sync="dialogRouteButtonVisible"
    >
      <el-form
        ref="editRouteButtonForm"
        :rules="editButtonRules"
        :model="editRouteButtonData"
        label-position="left"
        label-width="100px"
      >
        <el-form-item :label="$t('routeButton.column.name.label')" prop="name">
          <el-input
            v-model="editRouteButtonData.name"
            :placeholder="$t('routeButton.column.name.placeholder')"
          />
        </el-form-item>
        <el-form-item :label="$t('routeButton.column.sort.label')" prop="sort">
          <el-input-number
            v-model="editRouteButtonData.sort"
            :placeholder="$t('routeButton.column.sort.placeholder')"
          />
        </el-form-item>
        <el-form-item :label="$t('routeButton.column.code.label')" prop="code">
          <el-input
            v-model="editRouteButtonData.code"
            :placeholder="$t('routeButton.column.code.placeholder')"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRouteButtonVisible = false">{{ $t('common.action.close') }}</el-button>
        <el-button
          type="primary"
          @click="dialogRouteButtonStatus==='add'?apiAddRouteButton():apiModifyRouteButton()"
        >{{ $t('common.action.confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { listRoute, detailRoute, treeRoute, addRoute, modifyRoute, deleteRoute, apiList, apiAdd, buttonAdd, buttonList } from '@/api/system/route'
import waves from '@/directive/waves'
import SelectTree from '@/components/SelectTree.vue'

export default {
  directives: { waves },
  components: {
    SelectTree
  },
  data() {
    return {
      queryForm: {
        filter: undefined
      },

      tableData: [],
      tableKey: 0,
      drawerApiTableKey: 1,
      drawerButtonTableKey: 2,

      dialogRouteVisible: false,
      dialogRouteStatus: undefined,
      dialogRouteTitleMap: {
        add: this.$t('common.diglogTitle.add'),
        modify: this.$t('common.diglogTitle.modify')
      },
      editRules: {
        name: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }],
        parentId: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }],
        code: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }],
        route: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }],
        languateKey: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }],
        sort: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }]
      },
      editRouteData: {

      },
      routeTreeData: [],
      routeDefaultProps: {
        parent: 'parentId', // 父级唯一标识
        value: 'id', // 唯一标识
        label: 'name', // 标签显示
        children: 'children' // 子级
      },

      editRouteId: undefined,

      // api
      drawerApiVisibleSync: false,
      apiList: [],
      dialogRouteApiTitleMap: {
        add: this.$t('common.diglogTitle.add'),
        modify: this.$t('common.diglogTitle.modify')
      },
      dialogRouteApiStatus: undefined,
      dialogRouteApiVisible: false,
      editApiRules: {
        name: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }],
        code: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }],
        apiPath: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }],
        apiMethod: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }],
        sort: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }]
      },
      editRouteApiData: {},

      // button
      drawerButtonVisibleSync: false,
      buttonList: [],
      dialogRouteButtonTitleMap: {
        add: this.$t('common.diglogTitle.add'),
        modify: this.$t('common.diglogTitle.modify')
      },
      dialogRouteButtonStatus: undefined,
      dialogRouteButtonVisible: false,
      editButtonRules: {
        name: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }],
        code: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }],
        sort: [{ required: true, message: this.$t('validate.notNull'), trigger: 'blur' }]
      },
      editRouteButtonData: {}
    }
  },
  created() {
    this.init()
  },
  methods: {
    init() {
      this.apiListRoute()
      this.apiTreeRoute()
    },
    apiListRoute() {
      listRoute().then(response => {
        this.tableData = response.data
      })
    },
    apiTreeRoute() {
      treeRoute().then(response => {
        this.routeTreeData = [
          {
            id: '-1',
            name: this.$t('common.rootName'),
            children: response.data
          }
        ]
      })
    },
    apiDetailRoute(id) {
      detailRoute(id).then(response => {
        if (response.data.type === 2) {
          this.editRouteApiData = response.data
        }
        if (response.data.type === 1) {
          this.editRouteButtonData = response.data
        }
        if (response.data.type === 0) {
          this.editRouteData = response.data
        }
      })
    },
    apiDeleteRoute(id, type) {
      deleteRoute(id).then(response => {
        if (type === 0) {
          this.init()
        } else if (type === 1) {
          this.apiButtonList()
        } else if (type === 2) {
          this.apiApiList()
        }

        this.$notify({
          title: this.$t('notify.success'),
          message: this.$t('common.options_success'),
          type: 'success',
          duration: 2000
        })
      })
    },
    apiAddRoute() {
      this.$refs['editRouteForm'].validate((valid) => {
        if (valid) {
          addRoute(this.editRouteData).then(response => {
            this.dialogRouteVisible = false
            this.init()
            this.$notify({
              title: this.$t('notify.success'),
              message: this.$t('common.options_success'),
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    apiModifyRoute() {
      this.$refs['editRouteForm'].validate((valid) => {
        if (valid) {
          modifyRoute(this.editRouteData).then(response => {
            this.dialogRouteVisible = false
            this.init()
            this.$notify({
              title: this.$t('notify.success'),
              message: this.$t('common.options_success'),
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },

    // /////////////////////////////////handle//////////////////////////////////////////
    handleFilter() { },
    handleAdd() {
      this.dialogRouteVisible = true
      this.dialogRouteStatus = 'add'
      this.editRouteData = {

      }
      this.$nextTick(() => {
        this.$refs['editRouteForm'].clearValidate()
      })
    },
    handleEdit(row) {
      this.dialogRouteVisible = true
      this.dialogRouteStatus = 'modify'
      this.apiDetailRoute(row.id)
      this.$nextTick(() => {
        this.$refs['editRouteForm'].clearValidate()
      })
    },
    handleDelete(row) {
      this.$confirm(this.$t('common.confirm_delete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.action.confirm'),
        cancelButtonText: this.$t('common.action.cancel'),
        type: 'warning'
      }).then(() => {
        this.apiDeleteRoute(row.id, 0)
      })
    },
    handleAddNewNode(row) {
      this.dialogRouteVisible = true
      this.dialogRouteStatus = 'add'
      this.editRouteData = {
        parentId: row.id
      }
      this.$nextTick(() => {
        this.$refs['editRouteForm'].clearValidate()
      })
    },

    // api

    apiApiList() {
      apiList(this.editRouteId).then(response => {
        this.apiList = response.data
      })
    },
    apiAddRouteApi() {
      this.$refs['editRouteApiForm'].validate((valid) => {
        if (valid) {
          this.editRouteApiData.parentId = this.editRouteId
          apiAdd(this.editRouteApiData).then(response => {
            this.dialogRouteApiVisible = false
            this.apiApiList()
            this.$notify({
              title: this.$t('notify.success'),
              message: this.$t('common.options_success'),
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    apiModifyRouteApi() {
      this.$refs['editRouteApiForm'].validate((valid) => {
        if (valid) {
          modifyRoute(this.editRouteApiData).then(response => {
            this.dialogRouteApiVisible = false
            this.apiApiList()
            this.$notify({
              title: this.$t('notify.success'),
              message: this.$t('common.options_success'),
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleDeleteApi(row) {
      this.$confirm(this.$t('common.confirm_delete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.action.confirm'),
        cancelButtonText: this.$t('common.action.cancel'),
        type: 'warning'
      }).then(() => {
        this.apiDeleteRoute(row.id, 2)
      })
    },

    handleOpenApi(row) {
      this.drawerApiVisibleSync = true
      this.editRouteId = row.id
      this.apiApiList(row.id)
    },
    handleAddApi() {
      this.dialogRouteApiStatus = 'add'
      this.dialogRouteApiVisible = true
      this.editRouteApiData = {}
      this.$nextTick(() => {
        this.$refs['editRouteApiForm'].clearValidate()
      })
    },
    handleEditApi(row) {
      this.dialogRouteApiStatus = 'modify'
      this.dialogRouteApiVisible = true
      this.apiDetailRoute(row.id)
      this.$nextTick(() => {
        this.$refs['editRouteApiForm'].clearValidate()
      })
    },

    // button

    apiButtonList() {
      buttonList(this.editRouteId).then(response => {
        this.buttonList = response.data
      })
    },
    apiAddRouteButton() {
      this.$refs['editRouteButtonForm'].validate((valid) => {
        if (valid) {
          this.editRouteButtonData.parentId = this.editRouteId
          buttonAdd(this.editRouteButtonData).then(response => {
            this.dialogRouteButtonVisible = false
            this.apiButtonList()
            this.$notify({
              title: this.$t('notify.success'),
              message: this.$t('common.options_success'),
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    apiModifyRouteButton() {
      this.$refs['editRouteButtonForm'].validate((valid) => {
        if (valid) {
          modifyRoute(this.editRouteButtonData).then(response => {
            this.dialogRouteButtonVisible = false
            this.apiButtonList()
            this.$notify({
              title: this.$t('notify.success'),
              message: this.$t('common.options_success'),
              type: 'success',
              duration: 2000
            })
          })
        }
      })
    },
    handleDeleteButton(row) {
      this.$confirm(this.$t('common.confirm_delete'), this.$t('common.tips'), {
        confirmButtonText: this.$t('common.action.confirm'),
        cancelButtonText: this.$t('common.action.cancel'),
        type: 'warning'
      }).then(() => {
        this.apiDeleteRoute(row.id, 1)
      })
    },

    handleOpenButton(row) {
      this.drawerButtonVisibleSync = true
      this.editRouteId = row.id
      this.apiButtonList(row.id)
    },
    handleAddButton() {
      this.dialogRouteButtonStatus = 'add'
      this.dialogRouteButtonVisible = true
      this.editRouteButtonData = {}
      this.$nextTick(() => {
        this.$refs['editRouteButtonForm'].clearValidate()
      })
    },
    handleEditButton(row) {
      this.dialogRouteButtonStatus = 'modify'
      this.dialogRouteButtonVisible = true
      this.apiDetailRoute(row.id)
      this.$nextTick(() => {
        this.$refs['editRouteButtonForm'].clearValidate()
      })
    }

  }
}
</script>
<style>
.el-drawer__close-btn:focus {
  outline: -webkit-focus-ring-color auto 0px;
}
</style>
